<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>首字母大写</h1>
        <!-- vm.hero = am -->
        <!-- 方案1：直接操作(太多的逻辑写在模板中，可读性差) -->
        {{hero.substring(0,1).toUpperCase() + hero.substring(1)}}
        <hr />
        {{computed1}}
        {{computed1}}
        {{computed1}}
        <hr />
        {{method1()}}
        {{method1()}}
        {{method1()}}
    </div>
</body>
<script>
    /* 
        计算属性：
            模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。
            在模板中放入太多的逻辑会让模板过重且难以维护。
            1. 写在 computed
            2. 定义语法和函数一致
            3. 必须有返回值
            4. 调用语法和状态/属性一致 key 是计算属性名，vlaue 是返回值
            5. 有缓存,基于依赖(状态)
        和函数区别：
            函数侧重于逻辑、事件
            计算属性侧重于结果
    */
    let vm = new Vue({
        el: '#app',
        data: {
            hero: "qop",
        },
        methods: {
            method1() {
                console.log('method1------------------------方法');
                return this.hero.substring(0, 1).toUpperCase() + this.hero.substring(1);
            }
        },
        // 计算属性
        computed: {
            computed1() {
                console.log('computed1+++++++++++++++++++++++计算属性');
                return this.hero.substring(0, 1).toUpperCase() + this.hero.substring(1);
            }
        }
    });
</script>

</html>